<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>专题专栏</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
</head>
<body>

<div id="article-list" v-cloak>
    <header-component></header-component>
    <navinner-component></navinner-component>

    <!-- 主站导航 -->
    <navrow-component  v-if="sitelevel == ''" :siteid="site_data"></navrow-component>
    <!-- 行政站导航 -->
    <navtab2-component v-if="sitelevel != 5 && sitelevel != '' " :siteid="site_data"></navtab2-component>
    <!-- 基层站导航 -->
    <navtab3-component v-if="sitelevel==5" :siteid="site_data"></navtab3-component>

    <subpagebanner-component :siteid="site_data" bannerid="138"></subpagebanner-component>

    <main>
        <div class="content">
            <div class="article-detail">
                <div class="article-detail-r" style="width: 100%">
                    <div class="article-header" style="width: 100%;margin: 0 auto">
                        <div class="article-header-inner">
                            <div class="article-logo" style="background: none;">
                                <img :src="parameter.icon" style="width:100%;height: 100%;object-fit: cover">
                            </div>
                            <div class="article-tip">{{decodeURI(parameter.category_name)}}</div>
                        </div>
                        <div class="article-hot">HOT</div>
                    </div>
                    <div class="article-list">
                        <a class="article-list-item" :href="'./article.html?id=' + item.id + '&type=site&category_name=' + parameter.category_name" v-for="(item,index) in articleList">
                            <div class="article-item-img" :style="{ 'background-image' : 'url('+ item.coverimages_text[0] +')' }"></div>
                            <div class="article-item-content" style="flex:1;margin-left:1rem">
                                <div class="article-item-title">{{item.title}}</div>
                                <div class="article-item-prop">
                                    <span>发布于：{{item.resource}}</span>
                                    <span>{{item.publishtime_text}}</span>
                                    <span>评论：{{item.comment}}</span>
                                </div>
                                <div class="article-item-text">{{item.postcontent | textFilter}}</div>
                            </div>
                        </a>
                    </div>

                    <v-pagination v-if="total" :total="total" :display="limit" :currentPage="page" :pagegroup="pagegroup" @pagechange="togglePage"></v-pagination>
                </div>
            </div>
        </div>
    </main>

    <footer-component></footer-component>
</div>


<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>

<script>
    var site = JSON.parse(window.localStorage.getItem("station")) || {}


    var search = new Vue({
        el:"#article-list",
        data    : {
            parameter   : parameter,
            site_data   : site ,           // 站点数据

            articleList : [] ,             // 文章列表

            category_id : 0,               // 当前分类
            site_id     : 0,               // 当前站点id

            weburl      : weburl ,         // 基础路径
            total       : 0 ,              // 数据总条数
            limit       : 10 ,             // 每页显示条数
            page        : 1 ,              // 当前页码
            pagegroup   : 0 ,               // 总页码

            sitelevel   : ''
        },
        mounted(){
            if (window.localStorage.getItem('station')){
                this.sitelevel = JSON.parse(window.localStorage.getItem('station')).site_level;
            }

            // this.getArticleList(true);
            this.getSpecialData();
        } ,
        methods : {
            // 获取专题专栏数据
            getSpecialData(){
                var data = {};

                if( this.parameter.type != "home" ){
                    data.site_id = this.site_data.site_id;
                }

                axios.post( sysurl + 'index/special' , data ).then(res => {
                    var datas = res.data;
                    if( datas.code === 1 ){
                        this.site_id = data.site_id || 0;
                        this.category_id = datas.id;
                        this.getArticleList();
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 获取文章列表
            getArticleList(){
                if(this.page == 1){ this.articleList = [] };

                axios.post(sysurl + 'index/articleList' , {
                    category_id : this.parameter.category_id ,
                    site_id     : this.site_id ,
                    limit       : this.limit ,
                    page        : this.page
                }).then(res => {
                    var datas = res.data;

                    if( datas.code === 1 ){
                        this.articleList = datas.data.data;

                        if( datas.data.current_page == 1 && datas.data.total > 0 ){
                            this.total = datas.data.total;
                            this.pagegroup = datas.data.last_page;
                        }
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 分页
            togglePage(page){
                this.page = page || this.page;
                this.getArticleList();
            }
        } ,
        filters:{
            // 过滤中文
            textFilter(txt){
                var str;
                str = txt.match(regHtml,"");
                return str.join("");
            }
        },
    })
</script>
</body>
</html>
